<template>
  <div class="work-form">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="公司名称" prop="compandyName">
        <el-input v-model="ruleForm.compandyName"></el-input>
      </el-form-item>
      <el-form-item label="职位" prop="positionName">
        <el-input v-model="ruleForm.positionName"></el-input>
      </el-form-item>
      <el-form-item label="起始时间" prop="startsStopTime">
        <el-date-picker v-model="ruleForm.startsStopTime"
        type="daterange" style="width:100%" value-format="yyyy-MM-dd"
        format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="工作描述" prop="describe">
        <el-input type="textarea" v-model="ruleForm.describe" maxlength="80"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">
          {{userItem?'编辑':'立即创建'}}
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ExperienceApi from '@/api/experience';

export default {
  name: 'WorkForm',
  props: ['dialogVisible', 'userItem'],
  data() {
    return {
      ruleForm: {
        compandyName: this.userItem ? this.userItem.company_name : '',
        positionName: this.userItem ? this.userItem.postion : '',
        startsStopTime: this.userItem ? [this.userItem.start_time, this.userItem.end_time] : [],
        describe: this.userItem ? this.userItem.decs : '',
      },
      rules: {
        compandyName: [
          { required: true, message: '请输入所在公司', trigger: 'blur' },
          {
            min: 2,
            max: 15,
            message: '长度在2到15个字符',
            trigger: 'blur',
          },
        ],
        positionName: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          {
            min: 2,
            max: 8,
            message: '长度在2到8个字符',
            trigger: 'blur',
          },
        ],
        startsStopTime: [
          { required: true, message: '请输入在职时间', trigger: 'blur' },
        ],
        describe: [
          { required: true, message: '工作描述', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.userItem) {
            const postData = {
              id: this.userItem.id,
              compandyName: this.ruleForm.compandyName,
              positionName: this.ruleForm.positionName,
              describe: this.ruleForm.describe,
              startTime: new Date(this.ruleForm.startsStopTime[0]).getTime(),
              endTime: new Date(this.ruleForm.startsStopTime[1]).getTime(),
            };
            ExperienceApi
              .putExp(postData)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.$message({
                    message: data.message,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          } else {
            const postData = {
              compandyName: this.ruleForm.compandyName,
              positionName: this.ruleForm.positionName,
              describe: this.ruleForm.describe,
              startTime: new Date(this.ruleForm.startsStopTime[0]).getTime(),
              endTime: new Date(this.ruleForm.startsStopTime[1]).getTime(),
            };
            ExperienceApi
              .postJob(postData)
              .then((data) => {
                if (data.data) {
                  this.$message({
                    message: data.message,
                    type: 'success',
                  });
                  this.resetForm('ruleForm');
                  this.$emit('update:dialogVisible', false);
                } else {
                  this.$message({
                    message: data.message,
                    type: 'error',
                  });
                }
              })
              .catch((err) => {
                this.$message({
                  message: err.message,
                  type: 'error',
                });
              });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    userItem() {
      if (this.userItem) {
        this.ruleForm.compandyName = this.userItem.company_name;
        this.ruleForm.positionName = this.userItem.postion;
        this.ruleForm.describe = this.userItem.decs;
        this.ruleForm.startsStopTime = [this.userItem.start_time, this.userItem.end_time];
      } else {
        this.ruleForm.compandyName = '';
        this.ruleForm.positionName = '';
        this.ruleForm.describe = '';
        this.ruleForm.startsStopTime = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.work-form {
  width: 100%;
  height: auto;
}
</style>
